
import { Suspense, lazy } from "react"
import { useRoutes } from "react-router"
// import Login from "../views/Login"
import Home from "../views/Home"
import Index from "../views/Index"
import Test from "../views/Test"
const Reg = lazy(() => import('../views/Reg')) //路由懒加载
const Login = lazy(() => import('../views/Login')) //路由懒加载
const EditUser = lazy(() => import('../views/EditUser')) //路由懒加载
const Company = lazy(() => import('../views/company/Company')) //路由懒加载
const CompanyEdit = lazy(() => import('../views/company/Edit')) //路由懒加载
const User = lazy(() => import('../views/system/User')) //路由懒加载
const Show = lazy(() => import('../views/company/Show')) //路由懒加载

const Userinfo = lazy(() => import('../views/user/UserInfo')) //路由懒加载
const Fee = lazy(() => import('../views/fee/Fee')) //路由懒加载

const FormDemo = lazy(() => import('../views/Form')) //路由懒加载
const UseContextDemo = lazy(() => import('../views/demo/UseContextDemo')) //路由懒加载
const UseMemoDemo = lazy(() => import('../views/demo/UseMemoDemo')) //路由懒加载
const ReduxDemo = lazy(() => import('../views/demo/ReduxDemo')) //路由懒加载
const routes=[

    {
        path:'/',
        element:<Home />,
        children:[
            {
                path:'index',
                element:<Suspense fallback={<div>Loading...</div>}><Index /></Suspense>
            },
            {
                path:'userinfo',
                element:<Suspense fallback={<div>Loading...</div>}><Userinfo /></Suspense>
            },
            {
                path:'fee',
                element:<Suspense fallback={<div>Loading...</div>}><Fee /></Suspense>
            },
            
            {
                path:'company',
                element:<Suspense fallback={<div>Loading...</div>}><Company /></Suspense>
            },
            {
                path:'edit',
                element:<Suspense fallback={<div>Loading...</div>}><CompanyEdit /></Suspense>
            },
            {
                path:'show/:id',
                element:<Suspense fallback={<div>Loading...</div>}><Show /></Suspense>
            },
            {
                path:'user',
                element:<Suspense fallback={<div>Loading...</div>}><User /></Suspense>
            },
        ]
    },
    {
        path:'/login',
        element:<Suspense><Login></Login></Suspense>
    }
    ,
    {
        path:'/reg',
        element:<Suspense fallback={<div>loading...</div>}><Reg></Reg></Suspense>
    }
    ,
    {
        path:'/test',
        element:<Test />
    },
    {
        path:'/form',
        element:<Suspense fallback={<div>loading...</div>}><FormDemo /></Suspense>
    },
    {
        path:'/editUser',
        element:<Suspense fallback={<div>loading...</div>}><EditUser /></Suspense>
    },
    {
        path:'/context',
        element:<Suspense fallback={<div>loading...</div>}><UseContextDemo /></Suspense>
    },
    {
        path:'/memo',
        element:<Suspense fallback={<div>loading...</div>}><UseMemoDemo /></Suspense>
    },
    {
        path:'/redux',
        element:<Suspense fallback={<div>loading...</div>}><ReduxDemo /></Suspense>
    }
    
    
    
]

export default ()=>{
  return  useRoutes(routes);
}